---
// 使用：<GreetingHeadline greeting="你好" name="朋友" />
const { greeting = "你好", name } = Astro.props
const boolean = true
// const { greeting = "你好", name = "宇航员" } = Astro.props;

---

<html>
  <div id="demo">
    <main class="card">
      {boolean ? <h1>The boolean is true</h1> : "false"}
      <slot name="after-header" />
      <h2>{greeting},{name}!</h2>
      <slot />
      <slot name="after-footer" />
    </main>
  </div>
</html>



<style>
  /* Background styles */
  #demo {
    background-image: url("https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100");
    background-position: center;
  }

  /* Glassmorphism card effect */
  .card {
    z-index: -10;
    backdrop-filter: blur(16px) saturate(199%);
    -webkit-backdrop-filter: blur(18px) saturate(199%);
    background-color: rgba(255, 255, 255, 0.7);
    /* border-radius: 15px; */
    border: 1px solid rgba(209, 213, 219, 0.3);
  }

  /* Generated by https://generator.ui.glass/ */
</style>
